<script setup>
import LoginService from "@/service/impl/LoginService.js"
import LoginModel from "@/model/LoginModel.js"
import {useRouter} from "vue-router";
import {log} from "@/util/Log.js";

let ro = useRouter().options.routes[2].children
let ruleForm = ref(null)
let router = useRouter()
const load = ref(false)
const from = ref(new LoginModel())

const login = () => {
    ruleForm.value.validate(async (valid) => {
        if (valid) {
            load.value = true
            if(!await LoginService.login(from.value, ro)){
                load.value = false
                return
            }
            router.push('/dashboard')
        } else {
            load.value = false
            return false;
        }
    })

}
</script>
<template>
    <el-row class="login">
        <el-row class="login-row">
            <el-row class="login-row-com">{{ $t('login.slogan') }}</el-row>
            <el-form
                ref="ruleForm"
                :label-position="'top'"
                :rules="from.rules"
                :model="from"
                class="login-row-form"
            >
                <el-form-item :label="$t('login.account')" prop="account">
                    <el-input v-model="from.account" clearable/>
                </el-form-item>
                <el-form-item :label="$t('login.password')" prop="password">
                    <el-input v-model="from.password" type="password" show-password/>
                </el-form-item>
                <el-form-item>
                    <el-button class="login-button" :loading="load" @click="login">{{ $t('login.login') }}</el-button>
                </el-form-item>
            </el-form>
        </el-row>
    </el-row>
</template>

<style lang="scss" scoped>
.login {
    width: 100%;
    height: 100vh;
    background-color: #303133;

    .login-row {
        width: 450px;
        margin: auto;

        .login-row-form {
            padding: 50px;
            width: 100%;
        }

        .login-button {
            margin-top: 15px;
            width: 100%;
        }

        .login-row-com {
            color: white;
        }
    }
}

</style>
